<template>
    <div class="exam-scores">
      <div class="filter-bar">
        <el-input
          v-model="searchText"
          placeholder="输入学员姓名搜索"
          style="width: 200px; margin-right: 16px"
          clearable
        />
        <el-select
          v-model="selectedSubject"
          placeholder="选择科目"
          style="width: 150px; margin-right: 16px"
          clearable
        >
          <el-option label="全部" value=""/>
          <el-option label="科目一" value="科目一"/>
          <el-option label="科目二" value="科目二"/>
          <el-option label="科目三" value="科目三"/>
          <el-option label="科目四" value="科目四"/>
        </el-select>
        <el-select
          v-model="selectedStatus"
          placeholder="选择状态"
          style="width: 120px; margin-right: 16px"
          clearable
        >
          <el-option label="全部" value=""/>
          <el-option label="未通过" value="未通过"/>
          <el-option label="已通过" value="已通过"/>
        </el-select>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
        <el-button type="primary" icon="el-icon-search" style="margin-left: 100px;" @click="getdata">搜索</el-button>
      </div>
  
      <el-table
        :data="examData"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="userName" label="学员姓名"/>
        <el-table-column prop="subject" label="考试科目"/>
        <el-table-column prop="score" label="考试分数">
          <template slot-scope="scope">
            {{ scope.row.score || '未考试' }}
          </template>
        </el-table-column>
        <el-table-column prop="attemptNumber" label="考试次数"/>
        <el-table-column prop="examDate" label="考试日期">
          <template slot-scope="scope">
            {{ formatDate(scope.row.examDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已通过' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import moment from 'moment'
  
  export default {
    name: 'ExamScores',
    data() {
      return {
        searchText: '',
        selectedSubject: '',
        selectedStatus: '',
        dateRange: [],
        examData: [],
        pagination: {
          currentPage: 1,
          pageSize: 10
        }
      }
    },
    created() {
      //this.fetchData()
    },
    methods: {
      async fetchData() {
        this.examData = await this.$request.get('/exam_scores/admin')
        this.examData=this.examData.data.records
        console.log(this.examData)
      },
      formatDate(date) {
        return date ? moment(date).format('YYYY-MM-DD') : '-'
      },
      getdata(){ 
        this.$request.get('/exam_scores/admin',{
          params:{
            name:this.searchText,
            page:this.pagination,
            size:this.pagination.pageSize,
            subject:this.selectedSubject,
            status:this.selectedStatus
          }
        }).then(res => {
            console.log(res)
            if (res.code === 1) {
            this.examData = res.data.records; // 更新学生列表
            } else {
              this.$message.error('查询信息失败');
            }
        });
      }
    },
  }
  </script>
  
  <style scoped>
  .exam-scores {
    padding: 20px;
  }
  .filter-bar {
    margin-bottom: 20px;
  }
  </style>